﻿.message {
    background-image: -ms-radial-gradient(right top, circle farthest-corner, #DDD 0%, white 100%);
    background-color: #999
}

.message header img {
    height: 80px;
}

    .message section[role=main] .grid {
        display: -ms-grid;
        -ms-grid-rows: 1fr 180px;
        height:100%;
    }

/* List View */
.message .win-listview {
    height:100%;
}

    .message .win-surface {
        background-color:white;
    }

    .message .win-viewport {
        height:100%;
        width:1246px;
        margin-left:60px;
    }

    .message .win-item {
        padding: 10px;
        text-align: center;
    }

        .message .win-item #name {
            text-transform: uppercase;
            color: #777;
        }

        .message .win-item svg {
            width:80px;
            height:80px;
        }

    .message .win-listview :not(.win-footprint).win-container {
       background-color: transparent;
    }
    
    /*:focus { border: 1px solid yellow !important;}*/

/* Message */
.message #message {
    font-size: 20pt;
    color: #808080;
    text-align:center;
    -ms-grid-row-align: center;
}

/* Input */
.message section[role=main] #input {
    margin: 20px 60px;
    padding: 10px;
    width:1226px;
    -ms-grid-row: 2;
    font-size: 24pt;
    background-color: white;
    border: 1px solid #DDD;
}
.message .embeddedIcon {
    display: inline-block;
    vertical-align: middle;
}

@media screen and (-ms-view-state: snapped) {
    .message section[role=main] {
        margin-left: 20px;
    }
}

@media screen and (-ms-view-state: portrait) {
    .message section[role=main] {
        margin-left: 100px;
    }
}
